<template>
  <div>
    <el-input
      v-if="isSearch"
      size="mini"
      class="databseSearch"
      placeholder="输入关键字进行过滤"
      v-model="filterText"
    >
    </el-input>

    <el-tree
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      :load="loadNode"
      lazy
      @node-contextmenu="rightClick()"
      :filter-node-method="filterNode"
      ref="tree"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        label: (data)=>{
          return (data.value ? data.value : data.name)  +"("+data.name+")"
        },
        children: "zones",
        isLeaf: "leaf",
      },
    };
  },
  props: {
    type: {
      type: String,
    },
    isSearch: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 加载sql 树状结构
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "HCLOUD" }]);
      }
      if (node.level > 1) return resolve([]);
      setTimeout(() => {
        let data = [];
        switch (this.type) {
          case "sql":
            data = this.$db.read().get("table").value();
            break;
        }
        resolve(data);
      }, 500);
    },
    rightClick(id) {
      this.$emit("rk", id);
    },
  },
};
</script>

<style>
</style>